import { Outlet } from 'react-router-dom';
import {Layout, Breadcrumb} from 'antd';
import LayoutFooter from '@/layouts/components/Footer';
import "./index.less"
import LayoutMenu from '@/layouts/components/Menu';
import { useEffect, useState } from 'react';
import BreadcrumbNav from './components/BreadcrumbNav';
import { setAuthButtons } from '@/redux/modules/auth/action';
import { updateCollapse } from '@/redux/modules/menu/action';
import { connect } from 'react-redux';
import LayoutHeader from './components/Header';

const LayoutIndex = (props: any) => {
    const {Sider, Content, Header} = Layout;
    const [collapsed, setCollapsed] = useState(false);
    const {isCollapse, updateCollapse, setAuthButtons} = props;

    // 获取按钮权限列表
    // const getAuthButtonsList = async () => {
    //     // data = {useHooks: ['add', 'del']}
    //     // const {data} = await getAuthButtons();
    //     // setAuthButtons(data);
    // }
    const getAuthButtonsList = async () => {
        let data = {"/sys/home": ['add', 'del']}
        // const {data} = await getAuthButtons();
        setAuthButtons(data);
    }
    useEffect(() => {
        getAuthButtonsList();
        
    }, [])
    return ( 
        <div className="container">
            <Sider collapsible collapsed={isCollapse} onCollapse={(value) => updateCollapse(value)} width={220} theme='dark'>
                <LayoutMenu/>
            </Sider>
            <Layout>
                <LayoutHeader />
                <Content>
                    <BreadcrumbNav/>
                    <Outlet/>
                </Content>
                <LayoutFooter></LayoutFooter>
            </Layout>
        </div>
     );
}

// export default LayoutIndex;
const mapStateToProps = (state: any) => state.menu;
const mapDispatchToProps = { setAuthButtons, updateCollapse}
export default connect(mapStateToProps, mapDispatchToProps)(LayoutIndex);